<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
<!-- 准备好一个容器-->
<div id="root">
    <school></school>
</div>
<script>

    Vue.prototype.x = 999
    const school = Vue.extend({
        template: `
			<div>
				<h2>学校名称：{{name}}</h2>
				<h2>学校地址：{{address}}</h2>
                <button @click="showX">点我输出x</button>
			</div>
		`,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },

        methods: {
            showX() {
                console.log(this.x)
            }
        }
    })
    const  vm = new Vue({
        el: '#root',
        data: {
            msg: '你好啊'
        },
        components: {
            school
        },
        created() {
            console.log(this)
        }
    })
    console.log('vm==',vm.__proto__ === Vue.prototype)

    console.log(school.prototype.__proto__ === Vue.prototype)
    //
    // function Demo() {
    //     this.a = 1;
    //     this.b = 2
    // }
    //
    // const d = new Demo()
    // console.log(Demo.prototype) //显示原型属性
    // console.log(d.__proto__) //隐式原型属性
    //
    // console.log(d.__proto__ === Demo.prototype)
    // Demo.prototype.x = 99
    //
    // console.log(d.x)
</script>
</body>
</html>